<script>
import {getTypeTotal} from "@/api/home";
import * as echarts from 'echarts';
export default {
  name: 'LineChart',
  data(){
    return {
      dataList: [],
      chart: null,
      chartData: {
        categories: [],
        seriesData: [],
      },
    }
  },
  methods: {
    async getDataList(){
      let dataList = await getTypeTotal().then(res => res.data)
      if (dataList.length > 15) {
        dataList = dataList.slice(0, 15);
      }
      this.dataList = dataList
      this.chartData.categories = dataList.map(item => item.typename);
      this.chartData.seriesData = dataList.map(item => item.total);
      this.initChart();
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      const option = {
        title: {
          text: '', // 图片分类访问数
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.chartData.categories,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.chartData.seriesData,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 3, // 线条宽度
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#36a2eb' }, // 渐变色起点
                { offset: 1, color: '#4bc0c0' }  // 渐变色终点
              ])
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(54, 162, 235, 0.6)' }, // 渐变色起点
                { offset: 1, color: 'rgba(75, 192, 192, 0.1)' }  // 渐变色终点
              ])
            }
          }
        ]
      };

      this.chart.setOption(option);
    },

  },
  mounted() {
    this.getDataList()
  }
}

</script>

<template>
  <div class="fill-width container_con">
    <div class="fill-width cotainer_title">
     热门分类统计
    </div>
    <el-divider class="custom-divider"/>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<style scoped lang="scss">
  .custom-divider{
    margin: 0 !important;
  }
  .container_con{
    background: white;
    margin: 0 0;
    border-radius: 10px;
  }
  .cotainer_title{
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
  }
</style>
